/**
 * Created by tanbingqin on 2020/2/25.
 */
import React, { Component, PropTypes } from 'react';
import CompactInput from 'components/compact-input'
import { Select, Input, InputNumber, Row, Col } from 'antd';
import { messages } from "share/common";
const Option = Select.Option;

class FloatDays extends Component {
  range = [{
    value: 'DEFAULT',
    text: messages('request-1.key477')/*不限制*/
  }, {
    value: 'BEFORE',
    text: messages('request-1.key718')/*当前日期前*/
  }, {
    value: 'CURRENT',
    text: messages('request-1.key719')/*当前日期*/
  }, {
    value: 'AFTER',
    text: messages('request-1.key720')/*当前日期后*/
  }];

  state = {
    range: 'DEFAULT',
    value: undefined,
  };

  componentDidMount() {
    const { value } = this.props;
    this.setValue(value);
  }

  setValue = value => {
    const { parser } = this.props;
    this.setState(parser(value));
  };

  handleChangeRange = range => {
    let value = undefined;
    if (range !== 'DEFAULT') {
      value = range === 'CURRENT' ? 0 : 1;
    }
    this.setState({ range, value }, this.dispatchOnChange)
  };

  dispatchOnChange = () => {
    const { range, value } = this.state;
    const { onChange, formatter } = this.props;
    onChange && onChange(formatter({
      range, value
    }))
  };

  renderValueComponent = () => {
    const { range, value } = this.state;
    switch(range) {
      case 'DEFAULT':
        return <Input disabled value={messages('request-1.key579')/*请输入temp2*/}/>;
      case 'CURRENT':
        return <Input disabled value={0}/>;
      case 'BEFORE':
        return <InputNumber
          placeholder={messages('request-1.key579')/*请输入temp2*/}
          min={1}
          max={999}
          precision={0}
          value={value}
          onChange={this.onChangeValue}
        />;
      case 'AFTER':
        return <InputNumber
          placeholder={messages('request-1.key579')/*请输入temp2*/}
          min={1}
          max={999}
          precision={0}
          value={value}
          onChange={this.onChangeValue}
        />;
    }
  };

  onChangeValue = value => {
    if (typeof value === 'number' && value) {
      this.setState({ value: value > 999 ? 999 : value }, this.dispatchOnChange);
    }
  };

  render() {
    const { range } = this.state;
    return (
      <Row>
        <Col span={20}>
          <CompactInput className="average-compact-input">
            <Select
              style={{width: '100%'}}
              onChange={this.handleChangeRange}
              value={range}
              getPopupContainer={triggerNode => triggerNode.parentNode}
            >
              {this.range.map(option => <Option key={option.value}>{option.text}</Option>)}
            </Select>
            {this.renderValueComponent()}
          </CompactInput>
        </Col>
        <Col span={4}>{messages('request-1.key721')/*（天）*/}</Col>
      </Row>
    );
  }

  static propTypes = {
    onChange: PropTypes.func,
    parser: PropTypes.func,
    formatter: PropTypes.func
  };

  static defaultProps = {
    onChange: () => {},
    parser: value => value,
    formatter: value => value
  };
}

export default FloatDays;
